<template>
  <div>
    <el-container style="color: #000;">
      <el-menu>
        <el-menu-item style="margin-bottom: 20px;">
          <el-form>
            <el-form-item>退款管理</el-form-item>
            <el-form-item><el-button type="success">退款配置</el-button></el-form-item>
          </el-form>
        </el-menu-item>
        <el-menu-item>
          <el-form>
            <el-form-item>
              用户&nbsp;
              <el-input style="width: 180px;" placeholder="用户手机号" v-model="form.phone" clearable />
            </el-form-item>

            <el-form-item label="状态" style="width: 150px;">
              <el-select v-model="form.status" placeholder="全部">
                <el-option label="审核通过" value="yes"></el-option>
                <el-option label="不予通过" value="no"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <div class="block">
                <span class="demonstration">申请时间</span>&nbsp;&nbsp;
                <el-date-picker style="width: 180px;" v-model="form.value1" type="date" placeholder="选择日期"
                  :picker-options="pickerOptions">
                </el-date-picker>&nbsp;&nbsp;
                <span class="demonstration">至</span>&nbsp;&nbsp;
                <el-date-picker v-model="form.value2" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </el-menu-item>
        <el-menu-item>
          <el-form>
            <el-form-item>
              <el-button type="success">筛查</el-button>
              <el-button type="info">重置</el-button>
              <el-button>导出excel</el-button>
            </el-form-item>
          </el-form>
        </el-menu-item>
      </el-menu>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      form: {
        phone: '',
        value1: '',
        value2: '',
        status: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },

};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100vh;
  display: flex;
  flex-flow: column;

  .el-form {
    width: 100%;
    display: flex;
  }

  .el-menu-item {
    width: 100%;
  }

  .el-menu-item:nth-child(1) {
    width: 100%;

    .el-form {
      justify-content: space-between;
      padding: 10px 0 20px 10px;

      button{
        background-color: #14937a;
      }
    }
  }

  .el-menu-item:nth-child(2) {
    width: 100%;

    .el-form-item {
      margin: 0 20px;
    }
    .el-form-item:nth-child(3){
      padding-left: 40px;
    }
  }
  .el-menu-item:nth-child(3) {
    button{
      margin: 20px;
      padding: 10px 15px;
    }
    button:nth-child(3){
      color: black;
    }
  }
}</style>